<!-- 活动详情（评论点赞） -->

<template>
  <view class="detail-page">
    <image class="detail-banner" :src="activity.image" mode="widthFix"></image>
    <view class="detail-content">
      <view class="title">{{ activity.title }}</view>
      <view class="meta">
        <text class="source">{{ activity.source }}</text>
        <text class="time">{{ activity.time }}</text>
      </view>
      <view class="info">
        <view class="info-item">
          <image src="/static/icons/location.png" mode="widthFix"></image>
          <text>{{ activity.location }}</text>
        </view>
        <view class="info-item">
          <image src="/static/icons/calendar.png" mode="widthFix"></image>
          <text>{{ activity.date }}</text>
        </view>
      </view>
      <view class="desc">
        <text class="desc-title">活动详情</text>
        <text class="desc-content">{{ activity.desc }}</text>
      </view>
    </view>

    <!-- 操作栏 -->
    <view class="action-bar">
      <button class="join-btn" @click="handleJoin">
        {{ joined ? '已报名' : '立即报名' }}
      </button>
      <view class="action-icons">
        <text class="like" @click="handleLike">
          <image 
            src="/static/icons/like.png" 
            mode="widthFix"
            :class="{ active: liked }"
          ></image>
          <text>{{ likeCount }}</text>
        </text>
        <text class="share" @click="handleShare">
          <image src="/static/icons/share.png" mode="widthFix"></image>
          <text>分享</text>
        </text>
      </view>
    </view>

    <!-- 评论区 -->
    <view class="comment-section">
      <view class="section-title">评论 ({{ comments.length }})</view>
      <CommentBox 
        :comments="comments"
        @send="handleSendComment"
        @like="handleCommentLike"
      ></CommentBox>
    </view>
  </view>
</template>

<script>
import CommentBox from '../../components/CommentBox.vue'

export default {
  components: { CommentBox },
  data() {
    return {
      activity: {
        id: 1,
        title: "校园歌手大赛初赛",
        source: "学生会文艺部",
        time: "发布于 3天前",
        location: "大礼堂",
        date: "2024-10-28 19:00",
        image: "/static/images/activity1.jpg",
        desc: "校园歌手大赛初赛来袭！无论你是实力唱将还是音乐爱好者，都可以报名参与，展现你的音乐才华。现场将有专业评委打分，优胜者晋级决赛，更有丰厚奖品等你来拿！"
      },
      liked: false,
      likeCount: 128,
      joined: false,
      comments: [
        {
          id: 1,
          username: "张三",
          avatar: "/static/avatar/1.png",
          content: "已经报名了，期待现场！",
          time: "2小时前",
          likeCount: 24,
          liked: false
        },
        {
          id: 2,
          username: "李四",
          avatar: "/static/avatar/2.png",
          content: "有没有一起去看的同学？",
          time: "5小时前",
          likeCount: 8,
          liked: false
        }
      ]
    }
  },
  onLoad(options) {
    // 实际项目中通过 options.id 获取活动详情
    console.log("活动ID：", options.id)
  },
  methods: {
    handleLike() {
      this.liked = !this.liked
      this.likeCount += this.liked ? 1 : -1
    },
    handleJoin() {
      this.joined = !this.joined
      uni.showToast({
        title: this.joined ? '报名成功' : '已取消报名',
        icon: 'none'
      })
    },
    handleShare() {
      uni.showToast({ title: '分享功能开发中', icon: 'none' })
    },
    handleSendComment(content) {
      // 模拟添加新评论
      this.comments.unshift({
        id: Date.now(),
        username: "我",
        avatar: "/static/avatar/default.png",
        content,
        time: "刚刚",
        likeCount: 0,
        liked: false
      })
    },
    handleCommentLike(index) {
      const comment = this.comments[index]
      comment.liked = !comment.liked
      comment.likeCount += comment.liked ? 1 : -1
    }
  }
}
</script>

<style scoped>
.detail-banner {
  width: 100%;
  height: 360rpx;
  object-fit: cover;
}
.detail-content {
  padding: 30rpx 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  line-height: 1.4;
}
.meta {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 24rpx;
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid var(--border-color);
}
.info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 30rpx;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 15rpx;
  font-size: 26rpx;
}
.info-item image {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
}
.desc {
  margin-top: 30rpx;
}
.desc-title {
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}
.desc-content {
  font-size: 26rpx;
  line-height: 1.6;
  color: var(--text-secondary);
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: 0;
  z-index: 9;
}
.join-btn {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: var(--primary);
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}
.join-btn:active {
  background-color: #3a8ee6;
}
.action-icons {
  display: flex;
  gap: 40rpx;
}
.action-icons text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  color: var(--text-secondary);
}
.action-icons image {
  width: 36rpx;
  height: 36rpx;
  margin-bottom: 5rpx;
}
.like.active image {
  tint-color: #f56c6c;
}
.like.active text {
  color: #f56c6c;
}

.comment-section {
  background-color: #fff;
  margin-bottom: 120rpx; /* 避开底部操作栏 */
}
.section-title {
  padding: 20rpx;
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 1px solid var(--border-color);
}
</style>